<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收藏 - 地球贴</title>
    <link rel="stylesheet" href="./styles.css">
    <style>
        /* 收藏页面特有样式 */
        .favorites-container {
            padding: 0 0 70px;
            min-height: 100vh;
        }
        
        /* 个人资料卡片 */
        .profile-card {
            position: relative;
            background: linear-gradient(135deg, var(--color-primary-gradient), var(--color-secondary-gradient));
            padding: 40px 20px 24px;
            border-radius: 0 0 var(--radius-l) var(--radius-l);
            box-shadow: var(--elev-2);
            overflow: hidden;
        }
        .profile-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: translate(30%, -30%);
        }
        .profile-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 150px;
            height: 150px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: translate(-20%, 20%);
        }
        .profile-content {
            display: flex;
            align-items: center;
            position: relative;
            z-index: 10;
        }
        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: white;
            border: 4px solid rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: var(--color-primary);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            transition: transform var(--transition-normal);
        }
        .profile-avatar:hover {
            transform: scale(1.05);
        }
        .profile-info {
            flex: 1;
            margin-left: 16px;
            color: white;
        }
        .profile-name {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 4px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .profile-stats {
            font-size: 14px;
            opacity: 0.9;
            display: flex;
            gap: 20px;
            margin-top: 8px;
        }
        .stat-item {
            display: flex;
            flex-direction: column;
        }
        .stat-number {
            font-weight: 600;
            font-size: 16px;
        }
        .stat-label {
            font-size: 12px;
            opacity: 0.8;
            margin-top: 2px;
        }
        
        /* 内容区域 */
        .content-wrapper {
            padding: 20px 16px;
            position: relative;
        }
        
        /* 标题栏 */
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .section-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--color-fg);
        }
        .section-action {
            font-size: 14px;
            color: var(--color-primary);
            font-weight: 500;
        }
        
        /* 收藏列表 */
        .favorites-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .favorite-item {
            background-color: var(--color-card);
            border-radius: var(--radius-m);
            padding: 16px;
            display: flex;
            align-items: center;
            box-shadow: var(--elev-1);
            transition: all var(--transition-normal);
            position: relative;
            overflow: hidden;
        }
        .favorite-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary));
            border-radius: var(--radius-full) 0 0 var(--radius-full);
        }
        .favorite-item:hover {
            transform: translateY(-2px);
            box-shadow: var(--elev-3);
        }
        .favorite-flag {
            width: 60px;
            height: 40px;
            border-radius: var(--radius-s);
            overflow: hidden;
            flex-shrink: 0;
            margin-left: 8px;
        }
        .favorite-flag img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .favorite-info {
            flex: 1;
            margin-left: 12px;
        }
        .favorite-name {
            font-size: 16px;
            font-weight: 600;
            color: var(--color-fg);
            margin-bottom: 2px;
        }
        .favorite-region {
            font-size: 13px;
            color: var(--color-muted);
        }
        .favorite-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .action-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--color-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--color-border);
            transition: all var(--transition-normal);
        }
        .action-icon:hover {
            background-color: var(--color-primary-weak);
            color: var(--color-primary);
            border-color: var(--color-primary-weak);
        }
        .action-icon.remove:hover {
            background-color: var(--color-accent-weak);
            color: var(--color-accent);
            border-color: var(--color-accent-weak);
        }
        
        /* 功能列表 */
        .features-section {
            margin-top: 28px;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        .feature-card {
            background-color: var(--color-card);
            border-radius: var(--radius-m);
            padding: 16px 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: var(--elev-1);
            transition: all var(--transition-normal);
            text-align: center;
            aspect-ratio: 1;
        }
        .feature-card:hover {
            transform: translateY(-2px) scale(1.03);
            box-shadow: var(--elev-3);
        }
        .feature-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background-color: var(--color-primary-weak);
            color: var(--color-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            font-size: 20px;
        }
        .feature-card:nth-child(2) .feature-icon {
            background-color: var(--color-secondary-weak);
            color: var(--color-secondary);
        }
        .feature-card:nth-child(3) .feature-icon {
            background-color: var(--color-accent-weak);
            color: var(--color-accent);
        }
        .feature-card:nth-child(4) .feature-icon {
            background-color: var(--color-success-weak);
            color: var(--color-success);
        }
        .feature-title {
            font-size: 13px;
            font-weight: 500;
            color: var(--color-fg);
        }
        
        /* 响应式设计 */
        @media (min-width: 768px) {
            .favorites-container {
                max-width: 600px;
                margin: 0 auto;
            }
            .profile-card {
                border-radius: 0 0 var(--radius-xl) var(--radius-xl);
            }
            .content-wrapper {
                padding: 32px 20px;
            }
            .favorites-list {
                gap: 16px;
            }
            .favorite-item {
                padding: 20px;
            }
            .favorite-flag {
                width: 80px;
                height: 50px;
            }
        }
    </style>
</head>
<body>
    <div class="favorites-container">
        <!-- 个人资料卡片 -->
        <div class="profile-card">
            <div class="profile-content">
                <div class="profile-avatar">K</div>
                <div class="profile-info">
                    <div class="profile-name">King</div>
                    <div class="profile-stats">
                        <div class="stat-item">
                            <div class="stat-number">12</div>
                            <div class="stat-label">收藏国家</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">35</div>
                            <div class="stat-label">浏览地标</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">5</div>
                            <div class="stat-label">探索成就</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content-wrapper">
            <!-- 收藏列表标题 -->
            <div class="section-header">
                <h2 class="section-title">我的收藏</h2>
                <button class="section-action">查看全部</button>
            </div>

            <!-- 收藏列表 -->
            <div class="favorites-list">
                <!-- 收藏项1 -->
                <div class="favorite-item" style="opacity: 0;">
                    <div class="favorite-flag">
                        <img src="https://picsum.photos/id/1025/120/80" alt="美国国旗" />
                    </div>
                    <div class="favorite-info">
                        <div class="favorite-name">美国</div>
                        <div class="favorite-region">北美洲 · 5个地标</div>
                    </div>
                    <div class="favorite-actions">
                        <button class="action-icon view" onclick="window.location.href='country.html'">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3431 6 9 7.34315 9 9C9 10.6569 10.3431 12 12 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M2 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M21 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 2V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 21V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M4.22 4.22L5.64 5.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M18.36 18.36L19.78 19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M19.78 4.22L18.36 5.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M5.64 18.36L4.22 19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                        <button class="action-icon remove">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M21 4H8.99C8.45 4 8 4.45 8 5V5.58C6.21 6.22 5 8 5 10V16C5 18 6.21 19.78 8 20.42V21C8 21.55 8.45 22 9 22H21C21.55 22 22 21.55 22 21V5C22 4.45 21.55 4 21 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M18.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M14.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M10.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M6.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M15 13L21 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M21 13L15 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- 收藏项2 -->
                <div class="favorite-item" style="opacity: 0;">
                    <div class="favorite-flag">
                        <img src="https://picsum.photos/id/1016/120/80" alt="日本国旗" />
                    </div>
                    <div class="favorite-info">
                        <div class="favorite-name">日本</div>
                        <div class="favorite-region">亚洲 · 7个地标</div>
                    </div>
                    <div class="favorite-actions">
                        <button class="action-icon view" onclick="window.location.href='country.html'">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3431 6 9 7.34315 9 9C9 10.6569 10.3431 12 12 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M2 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M21 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 2V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 21V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M4.22 4.22L5.64 5.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M18.36 18.36L19.78 19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M19.78 4.22L18.36 5.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M5.64 18.36L4.22 19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                        <button class="action-icon remove">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M21 4H8.99C8.45 4 8 4.45 8 5V5.58C6.21 6.22 5 8 5 10V16C5 18 6.21 19.78 8 20.42V21C8 21.55 8.45 22 9 22H21C21.55 22 22 21.55 22 21V5C22 4.45 21.55 4 21 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M18.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M14.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M10.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M6.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M15 13L21 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M21 13L15 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- 收藏项3 -->
                <div class="favorite-item" style="opacity: 0;">
                    <div class="favorite-flag">
                        <img src="https://picsum.photos/id/1019/120/80" alt="法国国旗" />
                    </div>
                    <div class="favorite-info">
                        <div class="favorite-name">法国</div>
                        <div class="favorite-region">欧洲 · 6个地标</div>
                    </div>
                    <div class="favorite-actions">
                        <button class="action-icon view" onclick="window.location.href='country.html'">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3431 6 9 7.34315 9 9C9 10.6569 10.3431 12 12 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M2 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M21 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 2V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 21V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M4.22 4.22L5.64 5.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M18.36 18.36L19.78 19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M19.78 4.22L18.36 5.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M5.64 18.36L4.22 19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                        <button class="action-icon remove">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M21 4H8.99C8.45 4 8 4.45 8 5V5.58C6.21 6.22 5 8 5 10V16C5 18 6.21 19.78 8 20.42V21C8 21.55 8.45 22 9 22H21C21.55 22 22 21.55 22 21V5C22 4.45 21.55 4 21 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M18.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M14.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M10.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M6.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M15 13L21 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M21 13L15 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- 收藏项4 -->
                <div class="favorite-item" style="opacity: 0;">
                    <div class="favorite-flag">
                        <img src="https://picsum.photos/seed/morocco/120/80" alt="摩洛哥国旗" />
                    </div>
                    <div class="favorite-info">
                        <div class="favorite-name">摩洛哥</div>
                        <div class="favorite-region">非洲 · 4个地标</div>
                    </div>
                    <div class="favorite-actions">
                        <button class="action-icon view" onclick="window.location.href='country.html'">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3431 6 9 7.34315 9 9C9 10.6569 10.3431 12 12 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M2 12H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M21 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 2V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 21V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M4.22 4.22L5.64 5.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M18.36 18.36L19.78 19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M19.78 4.22L18.36 5.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M5.64 18.36L4.22 19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                        <button class="action-icon remove">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M21 4H8.99C8.45 4 8 4.45 8 5V5.58C6.21 6.22 5 8 5 10V16C5 18 6.21 19.78 8 20.42V21C8 21.55 8.45 22 9 22H21C21.55 22 22 21.55 22 21V5C22 4.45 21.55 4 21 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M18.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M14.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M10.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M6.5 4V4.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M15 13L21 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M21 13L15 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 功能区域 -->
            <div class="features-section">
                <h2 class="section-title">快速功能</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M19 8L5 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M19 12L9 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M19 16L5 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="feature-title">探索历史</div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z" stroke="currentColor" stroke-width="2"/>
                            </svg>
                        </div>
                        <div class="feature-title">个人设置</div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="2"/>
                                <path d="M9 12H15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <path d="M12 9V15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </div>
                        <div class="feature-title">世界地图</div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 1L2 7V17L12 23L22 17V7L12 1Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M2 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <path d="M12 23L12 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                        </div>
                        <div class="feature-title">每日推荐</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="bottom-nav">
            <a href="index.html" class="bottom-item">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>发现</span>
            </a>
            <a href="favorites.html" class="bottom-item active">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>收藏</span>
            </a>
        </div>
    </div>

    <script>
        // 主题持久化
        function applyTheme(t){
            document.documentElement.setAttribute('data-theme', t === 'dark' ? 'dark' : 'light');
        }
        applyTheme(localStorage.getItem('theme') || 'light');
        
        // 移除收藏项功能
        document.querySelectorAll('.action-icon.remove').forEach(button => {
            button.addEventListener('click', function() {
                const listItem = this.closest('.favorite-item');
                listItem.style.transition = 'all 0.3s ease';
                listItem.style.opacity = '0';
                listItem.style.height = '0';
                listItem.style.margin = '0';
                listItem.style.padding = '0';
                listItem.style.overflow = 'hidden';
                
                setTimeout(() => {
                    listItem.remove();
                }, 300);
            });
        });
        
        // 添加页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const favoriteItems = document.querySelectorAll('.favorite-item');
            favoriteItems.forEach((item, index) => {
                setTimeout(() => {
                    item.style.transition = 'opacity 0.3s ease';
                    item.style.opacity = '1';
                }, 100 * index);
            });
        });
    </script>
</body>
</html>
    